<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #666;
        }

        form {
            width: 300px;
            height: 200px;
            margin: 220px auto;
            background-color: #0094ff;
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>

<body>
    <form action="" method="">
        用户名：
        <input required type="text" name="userName" id="userName">
        <br> 密&nbsp;&nbsp;&nbsp;码：
        <input required type="password" name="password" id="password">
        <br> 确认密码：
        <input required type="password" name="con_password" id="con_password">
        <input type="button" value="注册" id="register">
        <input type="reset" value="重置">
    </form>
</body>

</html>
<script src="/node_modules/jquery/dist/jquery.min.js"></script>
<script>
    $("#register").on("click", function (e) {
        var userName = $("#userName").val();
        var password = $("#password").val();
        var con_password = $("#con_password").val();
        if (userName.length < 4) {
            console.log("用户名不合法");
            return;
        }
        if (userName.length < 3) {
            console.log("密码不合法");
            return;
        }
        if (password != con_password) {
            console.log("密码不一致");
            return;
        }
        var formData = $("form").serialize();
        $.ajax({
            url: "/register",
            type: "POST",
            data: formData,
            dataType: "json",
            success: function (result) {
                if (result.code == 1) {
                    alert(result.msg);
                    location.href = "/login";
                }
            }
        })
    })
</script>